﻿<div id="data-grid-demo">
    @(Html.DevExtreme().DataGrid<DevExtreme.NETCore.Demos.Models.DataGrid.Employee>()
        .ID("gridContainer")
        .Paging(paging => paging.Enabled(false))
        .ShowBorders(true)
        .Editing(editing => {
            editing.Mode(GridEditMode.Batch);
            editing.AllowUpdating(true);
            editing.SelectTextOnEditStart(true);
            editing.StartEditAction(GridStartEditAction.Click);
        })
        .Columns(columns => {
            columns.AddFor(m => m.Prefix)
                .Width(70);

            columns.AddFor(m => m.FirstName);

            columns.AddFor(m => m.LastName);

            columns.AddFor(m => m.Position)
                .Width(170);

            columns.AddFor(m => m.StateID)
                .Width(125)
                .Lookup(lookup => lookup
                    .DataSource(d => d.Mvc().Controller("DataGridStatesLookup").LoadAction("Get").Key("ID"))
                    .DisplayExpr("Name")
                    .ValueExpr("ID")
                );

            columns.AddFor(m => m.BirthDate);
        })
        .DataSource(d => d.Mvc()
            .Controller("DataGridEmployees")
            .LoadAction("Get")
            .UpdateAction("Put")
            .Key("ID")
        )
    )

    <div class="options">
        <div class="caption">Options</div>
        <div class="option">
            @(Html.DevExtreme().CheckBox()
                .ID("select-text-on-edit-start")
                .Text("Select Text on Edit Start")
                .Value(true)
                .OnValueChanged(@<text>
                    function(data) {
                        var dataGrid = $("#gridContainer").dxDataGrid("instance");
                        dataGrid.option("editing.selectTextOnEditStart", data.value);
                    }
                </text>)
            )
        </div>
        <div class="option">
            <span>Start Edit Action</span>
            @(Html.DevExtreme().SelectBox()
                .ID("start-edit-action")
                .DataSource(new[] { "click", "dblClick" })
                .Value("click")
                .OnValueChanged(@<text>
                    function(data) {
                        var dataGrid = $("#gridContainer").dxDataGrid("instance");
                        dataGrid.option("editing.startEditAction", data.value);
                    }
                </text>)
            )
        </div>
    </div>
</div>
